import Header from "../../componets/Header";
import MainItem from "../../componets/MainItem";
import Menu from "../../componets/Menu";
import st from "./home.module.css";
import STORE1 from "@/assets/img/store1.svg";
import DownArrow from "@/assets/img/downarrow.svg";
import Change from "@/assets/img/change.svg";
// 引入下方模块标题的图标
import MDXS from "@/assets/img/mdxs.svg";
import DSHDJ from "@/assets/img/dshdj.svg";
// import MDKL from '@/assets/img/mdkl.svg'
import XSLX from "@/assets/img/xslx.svg";
import HYGH from "@/assets/img/hygh.svg";
import { useEffect, useState } from "react";
import api from "../../api/request";
import DateTabs from "../../componets/DateTabs";
import ActionSheet from "../../componets/ActionSheet";
// 类型声明
type DataType = {
  value: number;
  text: string;
}[];

// 主页页面
const Home = () => {
  // 待审核数据
  const [data, setData]: [data: DataType, setData: any] = useState([]);
  // 门店销售数据
  const [dynamicData, setDynamicData]: [mdxs: any, setMdxs: any] = useState({
    acquisition: [],
    mdxs: [],
    memberCare: [],
    storeFootTraffic: [],
  });
  const [tab, setTab] = useState("today");
  // 控制下拉菜单显示
  const [visable, setVisable] = useState(false);
  // 控制显示店铺
  const [storename, setStoreName] = useState("城南香北京朝阳香河园柳芳店");
  useEffect(() => {
    // 这里是成功进入到了首页，但是在这之前还要先发一波请求去拿有关首页的数据
    api.get("/me-api/pending-preview").then((res) => {
      const obj = res.data.data;
      const datalist: DataType = Object.values(obj);
      setData(datalist);
    });
  }, []);
  useEffect(() => {
    // 清空state
    setDynamicData({
      acquisition: [],
      mdxs: [],
      memberCare: [],
      storeFootTraffic: [],
    });

    // 创建控制器
    const controller = new AbortController();
    const { signal } = controller;

    // 这里进行tabs切换展示的数据，就是从tabs组件往下所有的card中的数据都是根据这个东西动态获取的
    api.get(`/me-api/homedata?cat=${tab}`, { signal }).then((res) => {
      // 将后面的对象全部处理成数组并放到state中
      setDynamicData({
        ...dynamicData,
        acquisition: Object.values(res.data.data.acquisition),
        mdxs: Object.values(res.data.data.mdxs),
        memberCare: Object.values(res.data.data.memberCare),
        storeFootTraffic: Object.values(res.data.data.storeFootTraffic),
      });

      console.log(res);
    });
    return () => {
      // 组件卸载或 filter 变化时，中断上一次请求
      controller.abort();
    };
  }, [tab]);
  // console.log(data)
  return (
    <div className={st.home}>
      {/* 半圆背景 */}
      <div className={st.round}></div>

      {/* 主要内容部分 */}
      <div className={st.main}>
        {/* 标题组件 isHome为false就必须得接收一个参数 用于循环渲染*/}  
        <Header isHome={true}>超级店长</Header>
        {/* absolute的功能区 */}
        <div className={st.box}>
          {/* bar组件 */}
          <Bar setVisable={setVisable} storename={storename} />
          {/* 菜单组件 */}
          <Menu isHome={true} />
          {/* 卡片组件   title为块标题 config为数据源  xNum是x轴最大放多少个 scroll是否开启横向滚动 row控制骨架高度  dir控制是否左对齐*/}
          <MainItem
            title={"待审核数据"}
            config={data}
            xNum={4}
            src={DSHDJ}
            scroll={true}
            row={1}
            dir={true}
          />
          {/* tabs切换  日期  需要进行特殊处理的mainItem 因为涉及到请求 */}
          <DateTabs setTab={setTab} tab={tab} />
          <MainItem
            title={"门店销售"}
            config={dynamicData.mdxs}
            xNum={3}
            src={MDXS}
            row={2}
          />
          <MainItem
            title={"门店客流"}
            config={dynamicData.storeFootTraffic}
            xNum={3}
            src={"../../assets/img/mdkl.png"}
            row={1}
          />
          <MainItem
            title={"线上拉新"}
            config={dynamicData.acquisition}
            xNum={2}
            src={XSLX}
            row={1}
            scroll={true}
          />
          <MainItem
            title={"会员关怀"}
            config={dynamicData.memberCare}
            xNum={3}
            src={HYGH}
            row={1}
            dir={true}
          />
        </div>
      </div>
      <ActionSheet
        visable={visable}
        onSelect={(text: string) => setStoreName(text)}
        onCancel={() => setVisable(false)}
      />
    </div>
  );
};

// bar
const Bar = ({ setVisable, storename }: any) => {
  return (
    <div className={st.topBar}>
      <div className={st.left}>
        <img src={STORE1} className={st.store}></img>
        <span>{storename}</span>
        <img
          src={DownArrow}
          className={st.arrow}
          onClick={() => setVisable(true)}
        ></img>
      </div>
      <div className={st.right}>
        <span>切换</span>
        <img src={Change} className={st.change}></img>
      </div>
    </div>
  );
};
export default Home;
